﻿@model Carpool1.Models.User
@{
    ViewBag.Title = "用户注册";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card shadow">
                <div class="card-header bg-primary text-white text-center">
                    <h3>用户注册</h3>
                </div>

                @if (!ViewData.ModelState.IsValid)
                {
                    <div class="alert alert-danger m-3">
                        @Html.ValidationSummary(true, "", new { @class = "mb-0" })
                    </div>
                }

                <div class="card-body">
                    @using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "needs-validation", novalidate = "" }))
                    {
                        @Html.AntiForgeryToken()

                        <!-- 手机号 -->
                        <div class="mb-3">
                            <label class="form-label">手机号</label>
                            <div class="input-group">
                                <span class="input-group-text">+86</span>
                                <input type="tel" name="PhoneNumber" class="form-control"
                                       required pattern="^1[3-9]\d{9}$" placeholder="11位手机号"
                                       value="@Model.PhoneNumber" />
                                <button type="button" id="sendCode" class="btn btn-primary">获取验证码</button>
                                <div class="invalid-feedback">请输入有效手机号</div>
                            </div>
                        </div>

                        <!-- 验证码 -->
                        <div class="mb-3">
                            <label class="form-label">验证码</label>
                            <input type="text" name="verifyCode" class="form-control"
                                   required minlength="6" maxlength="6" placeholder="6位验证码" />
                            <div class="invalid-feedback">请输入验证码</div>
                        </div>

                        <!-- 密码 -->
                        <div class="mb-3">
                            <label class="form-label">设置密码</label>
                            <input type="password" name="Password" class="form-control"
                                   required minlength="6" placeholder="6-20位密码" />
                            <div class="invalid-feedback">密码不能少于6位</div>
                        </div>

                        <!-- 确认密码 -->
                        <div class="mb-3">
                            <label class="form-label">确认密码</label>
                            <input type="password" name="confirmPassword" class="form-control"
                                   required minlength="6" placeholder="再次输入密码" />
                            <div class="invalid-feedback">两次密码不一致</div>
                        </div>

                        <!-- 用户类型 -->
                        <div class="mb-3">
                            <label class="form-label">用户类型</label>
                            <div class="form-check">
                                <input type="radio" name="userType" id="driver" value="1" class="form-check-input" checked />
                                <label class="form-check-label" for="driver">车主</label>
                            </div>
                            <div class="form-check">
                                <input type="radio" name="userType" id="passenger" value="2" class="form-check-input" />
                                <label class="form-check-label" for="passenger">乘客</label>
                            </div>
                        </div>

                        <!-- 协议 -->
                        <div class="mb-3 form-check">
                            <input type="checkbox" id="agree" class="form-check-input" required />
                            <label class="form-check-label" for="agree">同意用户协议</label>
                            <div class="invalid-feedback">请同意协议</div>
                        </div>

                        <button type="submit" class="w-100 btn btn-primary">注册</button>
                        <div class="text-center mt-3">
                            <a href="@Url.Action("Login")" class="text-primary">已有账号？登录</a>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
    }

    <!-- 验证码弹窗 -->
    <div class="modal fade" id="codeModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body text-center p-5">
                    <h5>验证码已发送</h5>
                    <p class="my-3">验证码：<span id="code" class="badge bg-primary fs-5"></span></p>
                    <p class="text-muted">5分钟内有效</p>
                </div>
            </div>
        </div>
    </div>

    @section Scripts {
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
        <script>
        // 验证码发送与倒计时
        $("#sendCode").click(function() {
            const phone = $("input[name='PhoneNumber']").val();
            if (!/^1[3-9]\d{9}$/.test(phone)) {
                $("input[name='PhoneNumber']").addClass("is-invalid");
                return;
            }

            // 生成6位验证码
            const code = Math.floor(100000 + Math.random() * 900000).toString();
            $("#code").text(code);
            $("#codeModal").modal("show");

            // 发送到后端存储
            $.post("@Url.Action("StoreSmsCode")", { smsCode: code }, function() {
                // 倒计时
                let count = 60;
                const btn = $("#sendCode");
                btn.prop("disabled", true).text(`重新发送(${count}s)`);
                const timer = setInterval(() => {
                    count--;
                    btn.text(`重新发送(${count}s)`);
                    if (count <= 0) {
                        clearInterval(timer);
                        btn.prop("disabled", false).text("获取验证码");
                    }
                }, 1000);
            });
        });

        // 密码一致性验证
        $("input[name='confirmPassword']").blur(function() {
            const pwd = $("input[name='Password']").val();
            const confirmPwd = $(this).val();
            if (pwd !== confirmPwd) {
                $(this).addClass("is-invalid");
            } else {
                $(this).removeClass("is-invalid");
            }
        });

        // 表单验证
        document.querySelector(".needs-validation").addEventListener("submit", function(e) {
            if (!this.checkValidity()) {
                e.preventDefault();
                e.stopPropagation();
            }
            this.classList.add("was-validated");
        });
        </script>
    }
